<template>
  <div class="game-view">
    <div class="container">
      <div class="game-header">
        <h1>趣味游戏</h1>
        <p>在这里，你可以找到一些轻松有趣的小游戏来放松心情。</p>
      </div>

      <!-- 游戏列表 -->
      <div class="games-grid">
        <!-- 记忆翻牌游戏 -->
        <div class="game-card">
          <div class="game-image">
            <img src="https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=400&q=80" alt="记忆翻牌">
          </div>
          <div class="game-content">
            <h3>记忆翻牌</h3>
            <p>考验你的记忆力，找出所有配对的卡片。</p>
            <button class="play-btn" @click="startMemoryGame">
              <i class="fas fa-play"></i> 开始游戏
            </button>
          </div>
        </div>

        <!-- 打字游戏 -->
        <div class="game-card">
          <div class="game-image">
            <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=400&q=80" alt="打字游戏">
          </div>
          <div class="game-content">
            <h3>打字游戏</h3>
            <p>提高你的打字速度和准确性。</p>
            <button class="play-btn" @click="startTypingGame">
              <i class="fas fa-play"></i> 开始游戏
            </button>
          </div>
        </div>

        <!-- 2048游戏 -->
        <div class="game-card">
          <div class="game-image">
            <img src="https://images.unsplash.com/photo-1553481187-be93c21490a9?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=400&q=80" alt="2048">
          </div>
          <div class="game-content">
            <h3>2048</h3>
            <p>经典的2048数字游戏，挑战你的策略思维。</p>
            <button class="play-btn" @click="start2048Game">
              <i class="fas fa-play"></i> 开始游戏
            </button>
          </div>
        </div>
      </div>

      <!-- 游戏弹窗 -->
      <div v-if="showGameModal" class="game-modal">
        <div class="modal-content">
          <button class="close-btn" @click="closeGameModal">
            <i class="fas fa-times"></i>
          </button>
          
          <!-- 记忆翻牌游戏 -->
          <div v-if="currentGame === 'memory'" class="memory-game">
            <h2>记忆翻牌</h2>
            <div class="game-info">
              <span>时间: {{ gameTime }}秒</span>
              <span>配对: {{ matchedPairs }}/{{ totalPairs }}</span>
            </div>
            <div class="cards-grid">
              <div 
                v-for="(card, index) in cards" 
                :key="index"
                :class="['card', { flipped: card.isFlipped, matched: card.isMatched }]"
                @click="flipCard(index)"
              >
                <div class="card-inner">
                  <div class="card-front">
                    <i class="fas fa-question"></i>
                  </div>
                  <div class="card-back">
                    <i :class="card.icon"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 打字游戏 -->
          <div v-if="currentGame === 'typing'" class="typing-game">
            <h2>打字游戏</h2>
            <div class="game-info">
              <span>时间: {{ gameTime }}秒</span>
              <span>得分: {{ score }}</span>
            </div>
            <div class="typing-area">
              <p class="target-text">{{ currentText }}</p>
              <input 
                type="text" 
                v-model="userInput"
                @input="checkInput"
                placeholder="开始输入..."
                :disabled="!isPlaying"
              >
            </div>
          </div>

          <!-- 2048游戏 -->
          <div v-if="currentGame === '2048'" class="game-2048">
            <h2>2048</h2>
            <div class="game-info">
              <span>得分: {{ score }}</span>
              <button class="restart-btn" @click="restart2048">
                重新开始
              </button>
            </div>
            <div class="grid-2048">
              <div 
                v-for="(row, i) in grid" 
                :key="i"
                class="grid-row"
              >
                <div 
                  v-for="(cell, j) in row" 
                  :key="j"
                  :class="['grid-cell', { 'has-value': cell !== 0 }]"
                >
                  {{ cell || '' }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GameView',
  data() {
    return {
      showGameModal: false,
      currentGame: null,
      gameTime: 0,
      score: 0,
      timer: null,
      isPlaying: false,
      
      // 记忆翻牌游戏数据
      cards: [],
      flippedCards: [],
      matchedPairs: 0,
      totalPairs: 8,
      
      // 打字游戏数据
      currentText: '',
      userInput: '',
      texts: [
        'The quick brown fox jumps over the lazy dog.',
        'Programming is the art of telling another human what one wants the computer to do.',
        'The best way to predict the future is to implement it yourself.',
        'Code is like humor. When you have to explain it, it\'s bad.',
        'Sometimes it pays to stay in bed on Monday, rather than spending the rest of the week debugging Monday\'s code.'
      ],
      
      // 2048游戏数据
      grid: Array(4).fill().map(() => Array(4).fill(0))
    }
  },
  methods: {
    startMemoryGame() {
      this.currentGame = 'memory';
      this.showGameModal = true;
      this.initMemoryGame();
    },
    
    startTypingGame() {
      this.currentGame = 'typing';
      this.showGameModal = true;
      this.initTypingGame();
    },
    
    start2048Game() {
      this.currentGame = '2048';
      this.showGameModal = true;
      this.init2048Game();
    },
    
    closeGameModal() {
      this.showGameModal = false;
      this.currentGame = null;
      this.stopGame();
    },
    
    stopGame() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
      this.gameTime = 0;
      this.score = 0;
      this.isPlaying = false;
    },
    
    // 记忆翻牌游戏方法
    initMemoryGame() {
      const icons = [
        'fa-heart', 'fa-star', 'fa-moon', 'fa-sun',
        'fa-cloud', 'fa-bell', 'fa-gift', 'fa-bolt'
      ];
      
      // 创建配对的卡片
      this.cards = [...icons, ...icons]
        .map(icon => ({
          icon,
          isFlipped: false,
          isMatched: false
        }))
        .sort(() => Math.random() - 0.5);
      
      this.flippedCards = [];
      this.matchedPairs = 0;
      this.startTimer();
    },
    
    flipCard(index) {
      if (this.flippedCards.length === 2) return;
      
      const card = this.cards[index];
      if (card.isFlipped || card.isMatched) return;
      
      card.isFlipped = true;
      this.flippedCards.push(index);
      
      if (this.flippedCards.length === 2) {
        const [index1, index2] = this.flippedCards;
        const card1 = this.cards[index1];
        const card2 = this.cards[index2];
        
        if (card1.icon === card2.icon) {
          card1.isMatched = card2.isMatched = true;
          this.matchedPairs++;
          
          if (this.matchedPairs === this.totalPairs) {
            this.gameOver();
          }
        } else {
          setTimeout(() => {
            card1.isFlipped = card2.isFlipped = false;
          }, 1000);
        }
        
        this.flippedCards = [];
      }
    },
    
    // 打字游戏方法
    initTypingGame() {
      this.currentText = this.texts[Math.floor(Math.random() * this.texts.length)];
      this.userInput = '';
      this.score = 0;
      this.isPlaying = true;
      this.startTimer();
    },
    
    checkInput() {
      if (!this.isPlaying) return;
      
      if (this.userInput === this.currentText) {
        this.score += 10;
        this.currentText = this.texts[Math.floor(Math.random() * this.texts.length)];
        this.userInput = '';
      }
    },
    
    // 2048游戏方法
    init2048Game() {
      this.grid = Array(4).fill().map(() => Array(4).fill(0));
      this.score = 0;
      this.addNewNumber();
      this.addNewNumber();
      
      // 添加键盘事件监听
      window.addEventListener('keydown', this.handle2048Keydown);
    },
    
    addNewNumber() {
      const emptyCells = [];
      for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 4; j++) {
          if (this.grid[i][j] === 0) {
            emptyCells.push({ i, j });
          }
        }
      }
      
      if (emptyCells.length > 0) {
        const { i, j } = emptyCells[Math.floor(Math.random() * emptyCells.length)];
        this.grid[i][j] = Math.random() < 0.9 ? 2 : 4;
      }
    },
    
    handle2048Keydown(event) {
      if (!this.showGameModal || this.currentGame !== '2048') return;
      
      let moved = false;
      
      switch (event.key) {
        case 'ArrowUp':
          moved = this.moveUp();
          break;
        case 'ArrowDown':
          moved = this.moveDown();
          break;
        case 'ArrowLeft':
          moved = this.moveLeft();
          break;
        case 'ArrowRight':
          moved = this.moveRight();
          break;
      }
      
      if (moved) {
        this.addNewNumber();
      }
    },
    
    moveLeft() {
      let moved = false;
      for (let i = 0; i < 4; i++) {
        const row = this.grid[i].filter(cell => cell !== 0);
        for (let j = 0; j < row.length - 1; j++) {
          if (row[j] === row[j + 1]) {
            row[j] *= 2;
            this.score += row[j];
            row.splice(j + 1, 1);
            moved = true;
          }
        }
        const newRow = [...row, ...Array(4 - row.length).fill(0)];
        if (JSON.stringify(this.grid[i]) !== JSON.stringify(newRow)) {
          moved = true;
        }
        this.grid[i] = newRow;
      }
      return moved;
    },
    
    moveRight() {
      let moved = false;
      for (let i = 0; i < 4; i++) {
        const row = this.grid[i].filter(cell => cell !== 0);
        for (let j = row.length - 1; j > 0; j--) {
          if (row[j] === row[j - 1]) {
            row[j] *= 2;
            this.score += row[j];
            row.splice(j - 1, 1);
            moved = true;
          }
        }
        const newRow = [...Array(4 - row.length).fill(0), ...row];
        if (JSON.stringify(this.grid[i]) !== JSON.stringify(newRow)) {
          moved = true;
        }
        this.grid[i] = newRow;
      }
      return moved;
    },
    
    moveUp() {
      let moved = false;
      for (let j = 0; j < 4; j++) {
        let column = this.grid.map(row => row[j]).filter(cell => cell !== 0);
        for (let i = 0; i < column.length - 1; i++) {
          if (column[i] === column[i + 1]) {
            column[i] *= 2;
            this.score += column[i];
            column.splice(i + 1, 1);
            moved = true;
          }
        }
        const newColumn = [...column, ...Array(4 - column.length).fill(0)];
        for (let i = 0; i < 4; i++) {
          if (this.grid[i][j] !== newColumn[i]) {
            moved = true;
          }
          this.grid[i][j] = newColumn[i];
        }
      }
      return moved;
    },
    
    moveDown() {
      let moved = false;
      for (let j = 0; j < 4; j++) {
        let column = this.grid.map(row => row[j]).filter(cell => cell !== 0);
        for (let i = column.length - 1; i > 0; i--) {
          if (column[i] === column[i - 1]) {
            column[i] *= 2;
            this.score += column[i];
            column.splice(i - 1, 1);
            moved = true;
          }
        }
        const newColumn = [...Array(4 - column.length).fill(0), ...column];
        for (let i = 0; i < 4; i++) {
          if (this.grid[i][j] !== newColumn[i]) {
            moved = true;
          }
          this.grid[i][j] = newColumn[i];
        }
      }
      return moved;
    },
    
    restart2048() {
      this.init2048Game();
    },
    
    // 通用游戏方法
    startTimer() {
      this.gameTime = 0;
      this.timer = setInterval(() => {
        this.gameTime++;
      }, 1000);
    },
    
    gameOver() {
      this.stopGame();
      setTimeout(() => {
        alert(`游戏结束！\n用时：${this.gameTime}秒\n得分：${this.score}`);
      }, 500);
    }
  },
  beforeUnmount() {
    this.stopGame();
    window.removeEventListener('keydown', this.handle2048Keydown);
  }
}
</script>

<style scoped>
.game-view {
  padding: 60px 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.game-header {
  text-align: center;
  margin-bottom: 40px;
}

.game-header h1 {
  font-size: 2.5em;
  margin-bottom: 15px;
  color: var(--primary-color);
}

.game-header p {
  color: var(--text-light);
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.1em;
}

/* 游戏列表样式 */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.game-card {
  background: var(--card-bg);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.game-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
}

.game-image {
  height: 200px;
  overflow: hidden;
}

.game-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.game-card:hover .game-image img {
  transform: scale(1.1);
}

.game-content {
  padding: 20px;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Space out content */
}

.game-content h3 {
  font-size: 1.8em;
  margin-bottom: 10px;
  color: var(--text-color);
}

.game-content p {
  color: var(--text-light);
  margin-bottom: 20px;
  line-height: 1.6;
}

.play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* Center content in button */
  gap: 8px;
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 1em;
  cursor: pointer;
  transition: var(--transition);
  margin-top: auto; /* Push button to bottom */
}

.play-btn:hover {
  background: var(--secondary-color);
  transform: translateY(-2px);
}

/* 游戏弹窗 */
.game-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9); /* Dark overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(8px); /* Stronger blur */
  -webkit-backdrop-filter: blur(8px);
}

.modal-content {
  background: var(--bg-color); /* Use background color variable */
  border-radius: 15px;
  padding: 30px;
  max-width: 900px; /* Slightly wider modal */
  width: 90%;
  max-height: 95vh; /* Allow more height */
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow); /* Use shadow variable */
  color: var(--text-color); /* Use text color variable */
}

.dark-mode .modal-content {
   background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); /* Cyberpunk gradient for dark mode */
   border: 2px solid #3bade3; /* Cyberpunk border */
   box-shadow: 0 0 20px rgba(59, 173, 227, 0.6), 0 0 30px rgba(108, 92, 231, 0.6); /* Neon glow */
   color: #a1d9f4; /* Light blue text */
   font-family: 'Press Start 2P', cursive; /* Pixel font for dark mode */
}

.close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(var(--primary-color-rgb), 0.2); /* Use primary color with alpha */
  border: 1px solid var(--primary-color); /* Use primary color variable */
  color: var(--primary-color); /* Use primary color variable */
  font-size: 20px;
  cursor: pointer;
  transition: var(--transition);
  width: 35px; /* Adjusted size */
  height: 35px; /* Adjusted size */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.close-btn:hover {
  background: var(--primary-color);
  color: white;
  box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.4); /* Glow on hover */
}

/* 游戏通用样式 (within modal) */
.game-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    color: var(--text-color); /* Use text-color variable */
    font-size: 1em;
}

.dark-mode .game-info {
    color: #a1d9f4; /* Cyberpunk text color in dark mode */
}

/* 记忆翻牌游戏样式 */
.memory-game h2 {
  text-align: center;
  margin-bottom: 20px;
  color: var(--primary-color);
  font-size: 2em; /* Adjusted font size */
}

.dark-mode .memory-game h2 {
   color: #a1d9f4; /* Cyberpunk text color in dark mode */
   text-shadow: 0 0 10px rgba(59, 173, 227, 0.8); /* Text glow in dark mode */
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  perspective: 1000px;
}

.card {
  /* General card styles are in main.css, applied to game-card and potentially modal content in dark mode */
}

/* Styles specific to cards within the memory game */
.memory-game .card {
  height: 120px; /* Consistent height */
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
  cursor: pointer;
  border: 1px solid var(--border-color); /* Added border using variable */
}

.memory-game .card.flipped {
  transform: rotateY(180deg);
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 24px;
}

.card-front {
    background: var(--card-bg); /* Use card-bg variable */
    color: var(--text-color); /* Use text-color variable */
}

.card-back {
  transform: rotateY(180deg);
  background: var(--primary-color); /* Use primary color variable */
  color: white;
}

.memory-game .card.matched .card-back {
  background: var(--success-color); /* Use success color variable */
}

/* Dark mode specific styles for memory game cards */
.dark-mode .memory-game .card-front,
.dark-mode .memory-game .card-back {
   border: 2px solid #3bade3; /* Cyberpunk border */
   box-shadow: 0 0 10px rgba(59, 173, 227, 0.4); /* Neon glow */
}

.dark-mode .memory-game .card-front {
   background: rgba(59, 173, 227, 0.2); /* Cyberpunk background */
   color: #a1d9f4; /* Cyberpunk text color */
}

.dark-mode .memory-game .card-back {
   background: rgba(108, 92, 231, 0.3); /* Cyberpunk background */
   color: #a1d9f4; /* Cyberpunk text color */
}

.dark-mode .memory-game .card.matched .card-back {
    background: rgba(46, 213, 115, 0.3); /* Cyberpunk success background */
    border-color: #2ed573; /* Cyberpunk success border */
}

/* 打字游戏样式 */
.typing-game h2 {
  text-align: center;
  margin-bottom: 20px;
  color: var(--primary-color);
  font-size: 2em; /* Adjusted font size */
}

.dark-mode .typing-game h2 {
    color: #a1d9f4; /* Cyberpunk text color in dark mode */
    text-shadow: 0 0 10px rgba(59, 173, 227, 0.8); /* Text glow in dark mode */
}

.typing-area {
  margin-top: 30px;
  width: 100%;
  max-width: 600px;
  margin: 30px auto 0; /* Center and add top margin */
}

.target-text {
  background: var(--card-bg); /* Use variable */
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  line-height: 1.6;
  color: var(--text-color); /* Use variable */
  border: 1px solid var(--border-color); /* Added border */
}

.dark-mode .target-text {
    background: rgba(59, 173, 227, 0.1); /* Cyberpunk background */
    border: 2px solid #3bade3; /* Cyberpunk border */
    color: #a1d9f4; /* Cyberpunk text color */
    text-shadow: 0 0 5px rgba(59, 173, 227, 0.8); /* Text glow */
}

.typing-area input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-color); /* Use variable */
  border-radius: 8px;
  font-size: 1rem;
  transition: var(--transition), box-shadow 0.3s ease; /* Add box-shadow transition */
  background: var(--bg-color-light); /* Use variable */
  color: var(--text-color);
}

.dark-mode .typing-area input {
    background: rgba(59, 173, 227, 0.1); /* Cyberpunk background */
    border: 2px solid #3bade3; /* Cyberpunk border */
    color: #a1d9f4; /* Cyberpunk text color */
}

.typing-area input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);
}

.dark-mode .typing-area input:focus {
   box-shadow: 0 0 15px rgba(59, 173, 227, 0.4); /* Cyberpunk focus glow */
}

/* 2048游戏样式 */
.game-2048 h2 {
  text-align: center;
  margin-bottom: 20px;
  color: var(--primary-color);
  font-size: 2em; /* Adjusted font size */
}

.dark-mode .game-2048 h2 {
   color: #a1d9f4; /* Cyberpunk text color in dark mode */
   text-shadow: 0 0 10px rgba(59, 173, 227, 0.8); /* Text glow in dark mode */
}

.restart-btn {
  background: var(--card-bg); /* Use variable */
  color: var(--text-color); /* Use variable */
  border: 1px solid var(--border-color); /* Added border */
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: var(--transition);
  font-size: 1em; /* Adjusted font size */
}

.restart-btn:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color); /* Ensure border matches */
}

.dark-mode .restart-btn {
    background: rgba(59, 173, 227, 0.2); /* Cyberpunk background */
    color: #a1d9f4; /* Cyberpunk text color */
    border: 2px solid #3bade3; /* Cyberpunk border */
    font-family: 'Press Start 2P', cursive;
    font-size: 0.8em;
}

.dark-mode .restart-btn:hover {
    background: rgba(59, 173, 227, 0.3); /* Cyberpunk hover background */
    box-shadow: 0 0 15px rgba(59, 173, 227, 0.4); /* Cyberpunk hover glow */
    color: #a1d9f4; /* Maintain text color */
}

.grid-2048 {
  background: var(--card-bg); /* Use variable */
  padding: 10px;
  border-radius: 10px;
  margin-top: 20px;
  border: 1px solid var(--border-color); /* Added border */
}

.dark-mode .grid-2048 {
    background: rgba(59, 173, 227, 0.1); /* Cyberpunk background */
    padding: 15px; /* Adjusted padding */
    border-radius: 10px;
    border: 2px solid #3bade3; /* Cyberpunk border */
    margin-top: 20px;
}

.grid-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.grid-row:last-child {
  margin-bottom: 0;
}

.grid-cell {
  width: 80px;
  height: 80px;
  background: var(--bg-color-light); /* Use variable */
  border: 1px solid var(--border-color); /* Added border */
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: var(--text-color); /* Use variable */
  transition: var(--transition);
}

.grid-cell.has-value {
  background: var(--primary-color); /* Use variable */
  color: white;
}

.dark-mode .grid-cell {
    background: rgba(59, 173, 227, 0.1); /* Cyberpunk background */
    border: 2px solid #3bade3; /* Cyberpunk border */
    color: #a1d9f4; /* Cyberpunk text color */
}

.dark-mode .grid-cell.has-value {
    background: rgba(108, 92, 231, 0.3); /* Cyberpunk background */
    box-shadow: 0 0 10px rgba(59, 173, 227, 0.4); /* Cyberpunk glow */
    color: #a1d9f4; /* Maintain cyberpunk text color */
}

@media (max-width: 768px) {
  .game-view {
    padding: 40px 0;
  }

  .game-header h1 {
    font-size: 2em;
    margin-bottom: 30px;
  }

  .game-header p {
    font-size: 1em;
  }
  
  .games-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .game-card {
    padding: 0;
  }
  
  .game-content {
    padding: 15px;
  }

  .game-content h3 {
    font-size: 1.5em;
  }

  .game-content p {
    font-size: 0.9em;
  }

  .play-btn {
    padding: 8px 16px;
    font-size: 0.9em;
  }

  .modal-content {
      padding: 20px;
      max-width: 95%; /* Adjust max-width for smaller screens */
  }

  .close-btn {
    width: 30px;
    height: 30px;
    font-size: 18px;
  }

  .game-info {
      font-size: 0.9em;
  }
  
  .memory-game h2,
  .typing-game h2,
  .game-2048 h2 {
    font-size: 1.8em;
  }

  .cards-grid {
    grid-template-columns: repeat(3, 1fr); /* Adjust grid for smaller screens */
    gap: 10px;
  }

  .memory-game .card {
    height: 100px; /* Adjusted height */
  }

  .card-front,
  .card-back {
      font-size: 20px;
  }

  .typing-area {
    margin: 20px auto 0; /* Adjusted margin */
  }

  .target-text {
    padding: 15px; /* Adjusted padding */
    font-size: 0.9em; /* Adjusted font size */
  }

  .typing-area input {
    padding: 10px;
    font-size: 0.9em; /* Adjusted font size */
  }

  .grid-2048 {
    padding: 10px;
  }

  .grid-cell {
    width: 60px;
    height: 60px;
    font-size: 20px;
  }

  .dark-mode .grid-2048 {
     padding: 10px;
  }

  .dark-mode .restart-btn {
    font-size: 0.7em;
  }
}

/* Remove unused game-area styles */
/* .game-area { ... } */
/* .game-area p { ... } */
/* .game-placeholder { ... } */
/* .game-placeholder p { ... } */
</style> 